<template>
  <view
    class="card"
    v-if="rData.transaction.goodsType !== 'OnlineLesson'"
    :style="{ 'background-color': rData.transaction.goodsType === 'OfflineLesson' ? '#ff7a66' : '#47a0f3' }"
  >
    <view class="main" @click="onGoDetailCourse">
      <view class="card-box">
        <view class="avatar">
          <uv-avatar
            :src="rData.teacher.profilePhoto || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]"
            shape="square"
            size="120rpx"
            mode="aspectFill"
            @click.stop="onGoTeacher(rData.teacher?.id)"
          ></uv-avatar>
        </view>
        <view class="info">
          <view class="info-teacher">
            <view>
              {{ rData.teacher.username }}
            </view>
            <view class="grade">
              {{ gradeOptions.find(r => r.val === rData.lesson.grade).label }}
            </view>
          </view>
          <view class="info-name">
            {{ rData.lesson.name }}
          </view>
          <view class="info-merchant">
            {{ rData.merchant.name }}
          </view>
          <view class="info-time">{{ rData.lesson.issueDate }} {{ rData.lesson.timeDuration }}</view>
        </view>
      </view>
      <view class="location">
        <text class="item-text">
          {{ rData.merchant.location && rData.merchant.location.province + rData.merchant.location.district + rData.merchant.location.detail }}
        </text>
        <view class="location-icon" @click.stop="goLocation">
          <uv-icon name="dingwei" custom-prefix="custom-icon" color="#FF7A66" size="52rpx"></uv-icon>
        </view>
      </view>
      <view>
        <uv-line dashed margin="24.419rpx 0 17.442rpx 0"></uv-line>
      </view>
      <view class="bottom">
        <button class="reset-button bottom-code" @click.stop="onClickQrcode" v-if="rData.transaction.usageStatue === 0">查看券码</button>
        <text>{{ rData.transaction.timestamp }}</text>
        <view class="bottom-price">￥{{ rData.price }}</view>
      </view>
    </view>
    <view class="title">
      {{ ['待使用', '已使用', '已取消', '已退款'][rData.transaction.usageStatue] }}
    </view>
  </view>
  <view class="card online" v-else-if="rData.transaction.goodsType === 'OnlineLesson'" :style="{ 'background-color': '#6147b2' }">
    <view class="main" @click="onGoDetail">
      <view class="card-box">
        <view class="avatar">
          <uv-avatar
            :src="rData.onlineLesson?.teacherPhoto || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]"
            shape="square"
            size="120rpx"
            mode="aspectFill"
          ></uv-avatar>
        </view>
        <view class="info">
          <view class="info-teacher">
            <view>
              {{ rData.onlineLesson.teacherName }}
            </view>
            <view class="grade">
              {{ gradeOptions.find(r => r.val === rData.onlineLesson?.grade)?.label }}
            </view>
          </view>
          <view class="info-name">
            {{ rData.onlineLesson.lessonName }}
          </view>
        </view>
      </view>
      <view class="count"> 共{{ rData.onlineLesson.itemCount }}节 </view>
      <view>
        <uv-line dashed margin="24.419rpx 0 17.442rpx 0"></uv-line>
      </view>
      <view class="bottom">
        <text>{{ rData.transaction.timestamp }}</text>
        <view class="bottom-price">￥{{ rData.onlineLesson.price }}</view>
      </view>
    </view>
    <view class="title">
      {{ ['待使用', '已使用', '已取消', '已退款'][rData.transaction.usageStatue] }}
    </view>
  </view>
  <!-- 券码弹窗 -->
  <uv-modal ref="modalRef" title="" :closeOnClickOverlay="false">
    <view class="modal">
      <view>券码：</view>
      <view class="modal-code">{{ rData?.qrcode?.transactionSerial }} </view>
      <view class="flex flex-center mt-20">
        <uv-qrcode ref="qrcodeRef" size="200px" :value="rData.qrcodeJson"></uv-qrcode>
      </view>
    </view>
  </uv-modal>
  <!-- 券码弹窗 -->
  <uv-modal ref="modalTeacherRef" title="">
    <view class="teacher-modal">
      <view class="name">联系老师{{ rData.teacher.username }}</view>
      <view class="phone">
        <!-- <text>手机号：{{ rData.lesson.phone }}</text> -->
        <text @click="onPlay" class="primary">拨打</text>
      </view>
      <view class="wx">
        <text>微信号：{{ rData.teacher.wechatNo }}</text>
        <text @click="onCopy" class="primary">复制</text>
      </view>
    </view>
  </uv-modal>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { toastFn, onGoTeacher } from '@/common/js/fn.js';
  import { defaultImages, defaultImagesList, gradeOptions } from '@/common/js/global.js';
  import { reactive, ref, defineProps, toRefs, nextTick, computed } from 'vue';
  let props = defineProps({
    info: {
      type: Object,
      default: () => ({})
    }
  });
  let modalRef = ref('');
  let qrcodeRef = ref('');
  const onClickQrcode = () => {
    modalRef.value.open();
    nextTick(() => {
      qrcodeRef.value.make();
    });
  };
  const rData = computed(() => {
    return props.info;
  });

  const onToggleLaunch = () => {
    props.info.launch = !props.info.launch;
  };
  let modalTeacherRef = ref();
  const onClickTeacher = () => {
    modalTeacherRef.value.open();
  };
  const onPlay = () => {
    uni.makePhoneCall({
      phoneNumber: rData.value.lesson.phone
    });
  };
  let toastRef = ref();
  const onCopy = () => {
    uni.setClipboardData({
      data: rData.value.teacher.wechatNo,
      success: () => {
        toastFn(toastRef.value, '复制成功', 'success');
      }
    });
  }; // 定位
  const goLocation = () => {
    let { location } = rData.value.merchant;
    uni.openLocation({
      latitude: location.latitude, // 上海的纬度
      longitude: location.logitude, // 上海的经度
      name: location.city, // 地点名称
      address: location.district + location.detail, // 地址的详细说明
      scale: 18, // 缩放比例
      success: function (res) {
      },
      fail: function (err) {
      }
    });
  };
  const onGoDetail = () => {
    uni.$uv.route({
      url: '/pages/online/index',
      params: {
        id: rData.value.onlineLesson.id
      }
    });
  };
  const onGoDetailCourse = () => {

    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: rData.value.lesson.timetableID
      }
    });
  };
</script>

<style lang="scss" scoped>
  .online {
    .count {
      display: flex;
      justify-content: flex-end;
      margin-top: 68.023rpx;
      font-size: 27.907rpx;
      color: #959595;
    }
    .bottom {
      justify-content: flex-end !important;
      &-price {
        margin-left: 81.977rpx;
      }
    }
  }
  .card {
    margin: 0 auto;
    width: 678rpx;
    color: #959595;
    box-shadow: 0px 2px 4px 0px #00000040;
    border-radius: 21rpx;
    box-sizing: border-box;
    margin-bottom: 15.698rpx;
    position: relative;
    overflow: hidden;
    .main {
      background-color: #fff;
      padding: 33.14rpx 31.395rpx;
      clip-path: inset(0 0 0 0 round 0 174.419rpx 0 0);
    }
    &-box {
      display: flex;
      .avatar {
        border-radius: 20.93rpx;
        overflow: hidden;
      }
      .info {
        flex: 1;
        margin-left: 27.907rpx;
        &-teacher {
          font-family: Inter, Inter;
          font-weight: bold;
          font-size: 27.907rpx;
          color: #959595;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10.465rpx;
          .grade {
            width: 104.651rpx;
            box-sizing: border-box;
            background: rgba(97, 71, 178, 1);
            font-size: 19.186rpx;
            font-weight: 900;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            padding: 3px 10.465rpx;
            margin-right: 101.163rpx;
          }
        }
        &-merchant {
          margin-bottom: 10.465rpx;
        }
        &-name {
          font-size: 27.907rpx;
          color: #000;
          margin-bottom: 10.465rpx;
        }
      }
    }
    .middle {
      display: flex;
      justify-content: space-between;
      height: 174rpx;
      margin-top: 20rpx;
      .info {
        margin-left: 25rpx;
        padding-bottom: 35rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .teacher {
          font-family: Inter, Inter;
          font-weight: bold;
          font-size: 28rpx;
        }
        .lesson-name {
          display: flex;
          align-items: center;
          .diff {
            margin-left: 15rpx;
          }
        }
      }
    }
    .location {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .title {
      position: absolute;
      width: 94.209rpx;
      color: #000;
      right: 13.953rpx;
      top: 26.163rpx;
      font-weight: 900;
      text-align: right;
      z-index: 99;
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; /* 描边颜色 */
    }
    .bottom {
      font-family: Inter, Inter;
      font-weight: 400;
      font-size: 28rpx;
      color: #b1b1b1;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-code {
        height: 68rpx;
        border-radius: 56rpx 56rpx 56rpx 56rpx;
        line-height: 68rpx;
        margin: 0;
        color: $dance-main-color;
        font-size: 27.907rpx;
        font-weight: 700;
      }
      &-price {
        font-family: Inter, Inter;
        font-weight: 900;
        font-size: 34.884rpx;
        color: #656565;
      }
    }

    .teacher {
      display: flex;
      margin-bottom: 10rpx;
      &-info {
        margin-left: 31rpx;
        font-size: 28rpx;
        &-name {
          font-weight: bold;
          margin-bottom: 21rpx;
          display: flex;
          .svg {
            margin-left: 17rpx;
            transform: translateY(-20%);
            position: relative;
          }
        }
      }
      &-state {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        &-time {
          flex: 1;
          font-size: 24rpx;
          color: #959595;
          transition: all 0.3s;
          .num {
            margin-left: 26rpx;
          }
          .address {
            margin-left: 50rpx;
          }
        }
        &-money {
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          align-self: flex-end;
          .price {
            font-size: 35rpx;
            &-text {
              font-size: 42rpx;
              font-weight: bold;
            }
          }
          .count {
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.27);
          }
        }
      }
      &-oper {
        display: flex;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.27);
        font-size: 28rpx;
      }
    }
    .triangle {
      width: 0;
      height: 0;
      border-top: 52rpx solid transparent; /* 上边框透明 */
      border-left: 52rpx solid #fff; /* 左边框红色，形成三角形的一边 */
      border-bottom: 52rpx solid transparent; /* 下边框透明 */
      position: absolute;
      right: -12rpx;
      bottom: -30rpx;
      transform: rotate(45deg);
    }
    .icon {
      position: absolute;
      right: 5rpx;
      bottom: 5rpx;
    }
  }

  .panel {
    transition: max-height 0.3s ease-out;
    &-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #959595;
      font-size: 24rpx;
      border-bottom: 1px solid #545454;
      padding: 12rpx 0;
      &-time {
        display: flex;
        flex-direction: column;
        flex: 1;
        .num {
          display: flex;
          &-text {
            margin-left: 26rpx;
          }
        }
        .address {
          margin-left: 50rpx;
        }
      }
    }
    &-item:last-child {
      border: 0;
    }
  }

  /* 定义动画效果 */
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(20px);
    opacity: 0;
  }
  .teacher-modal {
    width: 100%;
    font-size: 28rpx;
    .primary {
      color: #57e087;
    }
    .name {
      margin-bottom: 28rpx;
      font-weight: bold;
    }
    .phone {
      margin-bottom: 17rpx;
      display: flex;
      justify-content: space-between;
    }
    .wx {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
